<template>
  <div class="app-container">
    <el-card shadow="never" class="table-container">
      <template #header>
        <div v-if="props.status == 1">{{ unionName }}学生会【成员列表】</div>
        <div v-if="props.status == 0">
          {{ unionName }}学生会【申请列表列表】
        </div>
      </template>
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="tableData"
        highlight-current-row
        :stripe="true"
        size="large"
      >
        <el-table-column align="center" label="序号" type="index" width="100" />
        <el-table-column align="center" label="姓名" prop="nickname" />
        <el-table-column align="center" label="性别" prop="gender">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.gender == 1">男</el-tag>
            <el-tag type="primary" v-if="scope.row.gender == 2">女</el-tag>
            <el-tag v-if="scope.row.gender == 0">未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="手机号" prop="mobile" />

        <el-table-column align="center" fixed="right" label="操作" width="180">
          <template #default="scope">
            <el-popconfirm
              title="你确定需要删除?"
              @confirm="handleDelete(scope.row.unionUserId)"
            >
              <template #reference>
                <el-button
                  v-if="props.status == 1"
                  type="danger"
                  text
                  size="small"
                >
                  <i-ep-delete />移除成员
                </el-button>
              </template>
            </el-popconfirm>
            <el-button
              v-if="props.status == 0"
              type="success"
              text
              size="small"
              @click="updateStatus(scope.row.unionUserId)"
            >
              <i-ep-delete />同意
            </el-button>

            <el-popconfirm
              title="你确定需要删除?"
              @confirm="handleDelete(scope.row.unionUserId)"
            >
              <template #reference>
                <el-button
                  v-if="props.status == 0"
                  type="danger"
                  text
                  size="small"
                >
                  <i-ep-delete />拒绝
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {
  getPageUnionMemberAPI,
  getFormUnionMemberAPI,
  addUnionMemberAPI,
  updateUnionMemberAPI,
  deleteUnionMemberAPI,
  updateStatusUnionMemberAPI,
} from "@/api/unionMember/index";

import { IPage, IUnionMember } from "@/api/unionMember/types";

import { ref, reactive } from "vue";

const props = defineProps({
  unionId: {
    type: Number,
    require: true,
  },
  unionName: {
    type: String,
    require: true,
  },
  status: {
    type: Number,
    require: true,
  },
});

const total = ref(0);
const loading = ref(false);
const tableData = ref<IUnionMember[]>([]);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);

// 表单数据
const formData = reactive<IUnionMember>({});
// 表单规则
const rules = reactive({
  title: [{ required: true, message: "请输入", trigger: "blur" }],
});

const dialog = reactive<DialogOption>({
  visible: false,
});
const queryParams = reactive<IPage>({
  pageNum: 1,
  pageSize: 10,
});

onMounted(() => {
  handleQuery();
});

// 获取学生会成员列表
function handleQuery() {
  queryParams.status = props.status;
  queryParams.unionId = props.unionId;
  loading.value = true;
  getPageUnionMemberAPI(queryParams)
    .then(({ data }) => {
      tableData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置查询 */

function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  handleQuery();
}

/** 关闭表单弹窗 */
function closeDialog() {
  dialog.visible = false;
  resetForm();
}

/** 打开学生会成员表单弹窗 */
function openDialog(unionId?: number) {
  if (unionId) {
    dialog.title = "修改学生会成员";
    getFormUnionMemberAPI(unionId).then(({ data }) => {
      Object.assign(formData, data);
    });
  } else {
    dialog.title = "新增学生会成员";
  }
  dialog.visible = true;
}

/** 学生会成员保存提交 */
function handleSubmit() {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      const unionId = formData.unionId;
      if (unionId) {
        updateUnionMemberAPI(unionId, formData)
          .then(() => {
            ElMessage.success("修改成功");
            closeDialog();
            resetQuery();
          })
          .finally(() => (loading.value = false));
      } else {
        addUnionMemberAPI(formData)
          .then(() => {
            ElMessage.success("新增成功");
            closeDialog();
            resetQuery();
          })
          .finally(() => (loading.value = false));
      }
    }
  });
}

/** 重置表单 */
function resetForm() {
  dataFormRef.value.resetFields();
  dataFormRef.value.clearValidate();
}

const emit = defineEmits(["query"]);

/** 删学生会成员 */
function handleDelete(unionUserId: number) {
  loading.value = true;
  deleteUnionMemberAPI(unionUserId)
    .then(() => {
      ElMessage.success("删除成功");
      handleQuery();
      emit("query");
    })
    .finally(() => (loading.value = false));
}

/* 修改状态 */
const updateStatus = (unionId: number) => {
  loading.value = true;
  updateStatusUnionMemberAPI(unionId)
    .then(() => {
      ElMessage.success("添加成功");
      handleQuery();
      emit("query");
    })
    .finally(() => (loading.value = false));
};
</script>

<style lang="scss" scoped></style>
